<template>
  <div id="nav">
    <div id="nav-left">
      <router-link to="/home"><div id="community-icon"></div></router-link>
      <router-link to="/home"><div id="community-hot"><a href=""><span>{{$t('m.hotPoint')}}</span></a></div></router-link>
      <div style="background-color: var(--theme-cutLine);width: 1px;height: 60%;transform: scaleX(0.5);"></div>
      <router-link to="/home/movie"> <div id="recommend-1"><a href=""><span>{{$t('m.movies')}}</span></a></div></router-link>
      <router-link to="/home/game"><div id="recommend-2"><a href=""><span>{{$t('m.game')}}</span></a></div></router-link>
    </div>
    <div id="community-search">
      <search-content class="searchContentBox" :searchInput="searchInput"/>
      <div id="input-box"><input @keydown="toSearchPage" id="inputContent" type="search" class="searchBox" :placeholder="$t('m.searchBox')" v-model="searchInput" spellcheck =“false” ></div>
        <div id="search-icon" @click="clickSearchPage">
          <svg t="1612074414904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2661" width="25" height="25"><path d="M823 691.1L701.6 573.6c25.5-44.7 40.1-96.1 40.1-150.8 0-172.5-144.5-312.3-322.7-312.3S96.4 250.3 96.4 422.8 240.8 735.1 419 735.1c56.5 0 109.6-14.1 155.8-38.9l121.4 117.6c35 33.9 91.8 33.9 126.8 0 35-33.8 35-88.8 0-122.7zM186 422.8c0-124.4 104.5-225.6 233-225.6s233 101.2 233 225.6-104.5 225.6-233 225.6-233-101.2-233-225.6z" fill="var(--theme-bgColor-aside-nav)" p-id="2662"></path></svg></div>
    </div>
    <div id="nav-right">
      <div id="log-in_sign-up" v-if="!loginState">
        <div id="log-in"><button class="button-sm button-color-white logIn"><span>{{$t('m.logIn')}}</span></button></div>
        <div id="sign-up"><button class="button-sm button-color-white signUp" style="filter: saturate(150%)"><span>{{$t('m.signUp')}}</span></button></div>
      </div>
      <div id="user-head">
        <div id="user-head-icon">
          <img v-if="loginState" class="headImg" :src="userInfo.headImg" alt="">
          <svg v-if="!loginState"  t="1611930728928" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2805" width="20" height="20"><path d="M501.937582 545.097053c147.891962 0 268.231366-118.534055 268.223274-264.288929 0-145.746783-120.330301-264.28994-268.222263-264.28994-147.890951 0-268.221252 118.584625-268.221252 264.28994C233.71633 426.520519 354.046631 545.097053 501.937582 545.097053zM612.471463 570.546911 411.497184 570.546911c-186.760063 0-338.664249 149.569875-338.664249 333.472733l0 19.794109c0 96.139636 149.47278 96.139636 338.664249 96.139636l200.974278 0c181.747565 0 338.694591 0 338.694591-96.139636l0-19.794109C951.164031 720.158252 799.235571 570.546911 612.471463 570.546911z" p-id="2806" fill="#ffffff"></path></svg></div>
      </div>
      <user-menu-log-out/>
    </div>
  </div>
</template>
<script>
  import userMenuLogOut from './userMenu/userMenuLogOut'
  import $ from 'jquery'
  import searchContent from "./functional unit/searchContent";

  export default {
    name: 'topNav',
    components: {
      userMenuLogOut,
      searchContent,
    },
    data(){
      return{
        loginState: false,
        userInfo:{},
        searchInput:'',
      }
    },
    created() {
      this.isLogin();
    },
    mounted () {
      $(function () {
        $('.searchBox').click(function(){
          $('#searchContent').css('display','flex')
          return false;//阻止冒泡
        });
        $('#searchRecord').click(function(){
          return false;
        });
        $(document).click(function(){
          $('#searchContent').css('display','none');
        });
      })


      //打开登录窗口
      $(function () {
        $('.logIn').click(function () {
          $('#login-box-background').css('display','flex');
          $('#logIn').css('borderBottom','solid  2px var(--theme-fontMain)');
          $('#login-box').css('display','flex');
          $('#sign-box').css('display','none');
          $("#login-box-background input").val('');
          $('#user-head-jumpBox').css('display','flex');
        })
      })
//打开注册页
      $(function () {
        $('.signUp').click(function () {
          $('#login-box-background').css('display','flex');
          $('#signUp').css('borderBottom','solid  2px var(--theme-fontMain)');
          $('#login-box').css('display','none');
          $('#sign-box').css('display','flex');
          $("#login-box-background input").val('');
        })
      })
//关闭窗口
      $(function () {
        $('.close-icon').click(function () {
          $('#login-box-background').css('display','none');
          $("#login-box-background input").val('');
          $('#yearError').css('display','none');
          $('#passwordAgError').css('display','none');
          $('#passwordError').css('display','none');
        })
      })
    },
    methods:{
      isLogin(){
        if(sessionStorage.token){
          this.loginState = true
          this.userInfo = JSON.parse(sessionStorage.user)
        }
      },
      toSearchPage(){

        const event = window.event || arguments.callee.caller.arguments[0];
        if (event.keyCode === 13)
        {
          this.$router.push({name:'search',query:{keyword:this.searchInput}});
        }
      },
      clickSearchPage(){
        this.$router.push({name:'search',query:{keyword:this.searchInput}});
      },

    },
  }
</script>

<style lang="less" scoped>
  .headImg{
    width: 100%;
    height: 100%;
  }
</style>
